<template>
    <van-sticky>
        <van-nav-bar :title="titleway" left-arrow @click-left="onClickLeft">
            <ul class="serch-ul" slot="title">
                <li :class="{active:tardeNum==1}" @click="settardeNum(1)">求购</li>
                <li :class="{active:tardeNum==0}" @click="settardeNum(0)">供应</li>
            </ul>
            <div slot="right">
                <a :href="'tel:'+phoneNum" slot="right">
                    <van-icon :name="phone" slot="right" />
                </a>
            </div>
        </van-nav-bar>
        <van-search class="search-module" v-model="searchText" placeholder="请输入您要搜索的内容" show-action @search="onSearch">
            <div slot="action" @click="onSearch">搜索</div>
        </van-search>
    </van-sticky>
</template>

<script>
import share from "./share.png";
import phone from "../../assets/img/phone.png";
import sortIcon from "../../assets/img/replaypart/iconsort.png";
export default {
    data() {
        return {
            share,
            phone,
            sortIcon,
            searchText: "",
            phoneNum: this.$store.state.nocaches.kefuphone
        };
    },
    computed: {
        tardeNum() {
            return this.$store.state.nocaches.replaypartObj.type;
        },

        titleway() {
            return this.$route.meta.title || this.$route.query.menuname;
        }
    },

    methods: {
        settardeNum(i) {
            this.$store.dispatch("acreplaypartType", i);
            this.$store.dispatch("acserch", "");
        },
        onClickLeft() {
            this.$router.go(-1);
        },
        onSearch() {
            this.$store.dispatch("acserch", this.searchText);
        },
       
    }
};
</script>

<style scoped lang="less">
.van-sticky {
    padding-bottom: 0.02rem;
    background: #ffff;
}
.sortIcon {
    font-size: 0.35rem;
    width: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.van-nav-bar {
    .van-icon {
        color: #272937;
        font-size: 20px;
    }
    .van-nav-bar__text {
        color: #272937;
    }
}
.serch-ul {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;

    li {
        width: 49%;
        height: 100%;
        font-size: 0.3rem;
        color: rgba(110, 111, 117, 1);
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        &.active {
            font-weight: 500;
            color: rgba(228, 152, 41, 1);
            &::after {
                position: absolute;
                content: "";
                display: block;
                width: 0.32rem;
                height: 0.08rem;
                background: rgba(228, 157, 53, 1);
                border-radius: 0.05rem;
                bottom: 0;
            }
        }
    }
}
</style>
